<script setup>
import { ref } from 'vue'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'

const props = defineProps({
    data: Object,
    statuss: Array
})

const pageRef = ref()
const tableRef = ref()

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.bfqz.orderSons(pageNum, pageSize, {
        orderId: props.data.id,
        detailType: 'stage,buy'
    })
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}
</script>
<template>
    <page-wrapper @get-data="getData" ref="pageRef">
        <template v-slot:default="props">
            <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records"
                :max-height="common.tableHeight(true, 0, 200)" highlight-hover-row round stripe border>
                <vxe-column type="seq" width="40"></vxe-column>
                <vxe-column field="id" title="订单ID" width="150" />
                <vxe-column field="rentDays" title="租用天数" width="75" />
                <vxe-column title="状态" width="80">
                    <template #default="{ row }">
                        <el-tag>{{common.getValueByKey('val', row.state, statuss, 'label')}}</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="stages" title="分期期数" width="75" />
                <vxe-column field="stagesNow" title="当前期数" width="75" />
                <vxe-column field="totalRent" title="总租金" width="80" />
                <vxe-column field="price" title="当前" width="80" />
                <vxe-column field="overdueDays" title="逾期天数" width="75" />
                <vxe-column field="overduePrice" title="逾期金额" width="80" />
                <vxe-column field="repayDate" title="账单日" width="165" />
                <vxe-column field="payDate" title="还款时间" width="165" />
                <vxe-column field="transactionNum" title="交易单号" width="160" />
                <vxe-column field="outTransNo" title="商家订单号" width="250" />
                <vxe-column field="payPrice" title="实际支付金额" width="100" fixed="right" />
            </vxe-table>
        </template>
    </page-wrapper>
</template>